<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .bord{
            border: 1px dashed #ffb2a4;
            width: 90%;
            margin: 20px auto;
        }
        .titlea{
            font-size: 20px;
            font-weight: bold;
            margin: 20px;
        }
        .introduce{
            font-size: 16px;
            margin: 0 auto;
            width: 80%;
        }
        .red{
            color: red;
        }
        * {padding:0;margin:0;font-size:14px}
        img {border:0 none}
        button {height:26px;padding:5px}

        /*标题栏*/
        .title {
            height:30px;
            line-height:30px;
            border-bottom:1px solid #efefef;
            background-color: rgb(79, 46, 255);
            font-weight:bold
        }

        /*查询栏*/
        .qry {
            height:35px;
            line-height:35px;
            border-bottom:1px solid #efefef;
            background-color: rgba(195, 200, 252, 0.84);
        }

        /*按钮兰*/
        .bar {
            height:26px;
            line-height:26px
        }

        /*数据栏*/
        .data {

        }

        .data table {
            width:100%;
            border:1px solid #efefef;
            border-collapse:collapse;
        }

        .data .page {
            height:30px;
            background-color: rgba(195, 200, 252, 0.84);
            text-align:center
        }
        tr{
            text-align: center;
        }
    </style>
    <script>
        var i = 0;
        var _row;
        //创建数组
        var data = [
            {id:i++,name:'张三',sex:0,remark:'备注1'},
            {id:i++,name:'李三',sex:1,remark:'备注2'},
            {id:i++,name:'王三',sex:0,remark:'备注3'},
            {id:i++,name:'董三',sex:0,remark:'备注4'},
            {id:i++,name:'董三',sex:0,remark:'备注4'},
            {id:i++,name:'常三',sex:1,remark:'备注5'},
            {id:i++,name:'侯三',sex:0,remark:'备注6'},
            {id:i++,name:'徐三',sex:0,remark:'备注7'},
            {id:i++,name:'徐三',sex:0,remark:'备注7'},
            {id:i++,name:'余三',sex:1,remark:'备注8'},
            {id:i++,name:'虞三',sex:0,remark:'备注9'},
            {id:i++,name:'虞三',sex:0,remark:'备注9'},
            {id:i++,name:'陈四',sex:1,remark:'备注9'},
            {id:i++,name:'任三',sex:0,remark:'备注9'},
            {id:i++,name:'欧阳',sex:0,remark:'备注9'},
            {id:i++,name:'欧阳',sex:0,remark:'备注9'},
            {id:i++,name:'陈三',sex:1,remark:'备注9'},
            {id:i++,name:'陈三',sex:1,remark:'备注9'},
            {id:i++,name:'卢三',sex:0,remark:'备注8'},
            {id:i++,name:'贺三',sex:0,remark:'备注7'},
            {id:i++,name:'贺三',sex:0,remark:'备注7'},
            {id:i++,name:'高三',sex:1,remark:'备注6'},
            {id:i++,name:'张三',sex:0,remark:'备注2'},
            {id:i++,name:'张三',sex:0,remark:'备注2'},
            {id:i++,name:'高五',sex:1,remark:'备注1'},
            {id:i++,name:'唐三',sex:1,remark:'备注0'}
        ];

        //当前是第几页
        var num = 1;

        //默认每页笔数
        var page_size = 5;

        //表格的总页数
        var total_page = Math.ceil(data.length / page_size);

        //具体展示表格的内容
        var grid = function (d) {
            var table = document.getElementById('theGrid');
            //清除
            while (table.rows.length > 1){
                table.deleteRow(table.rows.length - 1);
            }

            for (var i = 0 ; i < d.length; i++){

                var row = table.insertRow(-1);

                row.onmousemove = function () {
                    if (this.style.backgroundColor != 'red'){
                        this.style.backgroundColor = '#efefef';
                    }
                };
                row.onmouseout = function () {
                    if (this.style.backgroundColor != 'red'){
                        this.style.backgroundColor = '';
                    }
                };
                row.onclick = function () {

                    if (_row){
                        _row.style.backgroundColor = '';
                    }
                    this.style.backgroundColor = 'red';
                    _row = this;
            };

                //td单选
                var cell = row.insertCell(-1);
                cell.style.textAlign = 'center';
                cell.innerHTML = '<input class="checkbox" name="selected" type="checkbox" value="'+d[i].id+'"/>';
                row.setAttribute('_id',d[i].id);

                //td名称
                var cell = row.insertCell(-1);
                cell.textContent = d[i].name;
                row.setAttribute('_name',d[i].name);

                //td性别
                var cell = row.insertCell(-1);
                cell.style.textAlign = 'center';
                cell.textContent =(d[i].sex)?'男':'女';
                row.setAttribute('_sex',d[i].sex);

                //td备注
                var cell = row.insertCell(-1);
                cell.textContent =d[i].remark;
                row.setAttribute('_remark',d[i].remark);

                //td操作
                var cell = row.insertCell(-1);
                cell.innerHTML = '<button style="background-color: bisque" class="Upd" onclick="revise_fun('+ d[i].id + ', \'' + d[i].name + '\',\''+ d[i].sex + '\',\'' + d[i].remark + '\')">修改</button>';
                row.setAttribute('_operate',d[i].operate);
            }
        };

        function revise_fun(id,name,sex,remark){
            document.getElementById('revise').style.display = "block";
            document.getElementById('t1a').value = id;
            document.getElementById('t2a').value = name;
            document.getElementById('t3a').value = sex;
            document.getElementById('t4a').value = remark;

            //修改里的修改按钮
            document.getElementById('savea').onclick = function () {
                var id = document.getElementById("t1a").value;
                var name = document.getElementById("t2a").value;
                var sex = document.getElementById("t3a").value - 0;
                var remark = document.getElementById("t4a").value;

                for  (var i = 0;i < data.length;i++){
                    if(data[i].id ===id - 0){
                        data[i].name = name;
                        data[i].sex = sex;
                        data[i].remark = remark;
                        break;
                    }
                }
                document.getElementById('revise').style.display = "none";
                grid(data);
            };

            //修改里取消按钮
            document.getElementById('cancela').onclick = function () {
                document.getElementById('revise').style.display = "none";
            };
        }

        //用于获取相应页数的数据
        //num[页数]   size[每页几笔]    data[原始数据]
        var getPageData = function(num, size, data) {
            var reArr = [];
            var start = size * (num - 1);

            for (var i = 0; i < size; i++) {
                if (data[start]) {
                    reArr.push(data[start++]);
                }
            }
            return reArr;
        };

        //分页的方法
        var page = function(num) {
            //...
            var pageData = getPageData(num, page_size, data);
            grid(pageData);

            document.getElementById('spaNum').innerText = num;
            document.getElementById('spaAll').innerText = total_page;
        };

        //清除表格
        var clear = function() {
            //获取表格对象
            var grid_obj = document.getElementById('cateGrid');
            //如果表格的行数 > 1的话
            while (grid_obj.rows.length > 1) {
                grid_obj.deleteRow(-1);
            }
        };

        //页面加载完成
        window.onload = function () {
            //步骤1  展示表格  分页功能  默认第一页
            page(1);

            //分页按钮事件
            document.getElementById('btnHome').onclick = function() {
                if (1 === num) {
                    alert('已经是第一页!');
                    return false;
                } else {
                    page(1);
                }
            };
            document.getElementById('btnPrev').onclick = function() {
                if (1 === num) {
                    alert('已经是第一页!');
                    return false;
                } else {
                    page(--num);
                }
            };
            document.getElementById('btnNext').onclick = function() {
                if (num === total_page) {
                    alert('已经到最后一页!');
                    return false;
                } else {
                    page(++num);
                }
            };
            document.getElementById('btnLast').onclick = function() {
                if (num === total_page) {
                    alert('已经到最后一页!');
                    return false;
                } else {
                    page(total_page);
                }
            };

            //切换每页几笔
            document.getElementById('selPageNum').onchange = function() {
                page_size = this.value;
                total_page = Math.ceil(data.length / page_size);
                page(1);
            };

            //步骤2  表格操作
            //      2.1 : 查询
            document.getElementById('Que').onclick = function () {
                var _name = document.getElementById('txt_name').value;

                var _ = [];
                for (var i = 0; i < data.length; i++) {
                    if (data[i].name.indexOf(_name) > -1) {
                        _.push(data[i]);
                    }
                }
                grid(_);
            };

            //      2.2 : 新增
            document.getElementById('Add').onclick = function () {
                document.getElementById("t2").value = '';
                document.getElementById("t4").value = '';
                document.getElementById('addcd').style.display = "block";
                document.getElementById('t1').value = data.length+1;
            };
            //新增里取消按钮
            document.getElementById('cancel').onclick = function () {
                document.getElementById('addcd').style.display = "none";

            };
            //新增里保存按钮
            document.getElementById("save").onclick = function () {
                var snum = document.getElementById("t1").value;
                var fname = document.getElementById("t2").value;
                var ssex = document.getElementById("t3").value - 0;
                var ps = document.getElementById("t4").value;

                data.push({
                    id:i++,
                    name:fname,
                    sex:ssex,
                    remark:ps
                });
                //刷新表格
                document.getElementById('addcd').style.display = "none";
                grid(data);
            };

            //      2.3 : 修改

            //      2.4 : 删除 (全选功能)
            document.getElementById("chkAll").onclick = function () {
                var checklist = document.getElementsByName ("selected");
                if(document.getElementById("chkAll").checked)
                {
                    for(var i=0;i<checklist.length;i++)
                    {
                        checklist[i].checked = 1;
                    }
                }else{
                    for(var j=0;j<checklist.length;j++)
                    {
                        checklist[j].checked = 0;
                    }
                }
            };
            document.getElementById('Del').onclick = function () {
                var ids = [];//数组存放需要删除的id
                var _ = document.getElementsByClassName('checkbox');

                var status = false;
                for (var i = 0;i < _.length; i++){
                    if (_[i].checked){
                        ids.push(_[i].value);
                        status = true;
                    }
                }

                if (status){
                    if (confirm('你确定要删除吗？')){
                        ids = ids.reverse();
                        var newData = [];//新的数组
                        for(var i = 0;i <ids.length;i++){
                            for (var k = 0;k <data.length;k++){
                                if (data[k].id ==ids[i] - 0){
                                    data.splice(k,1);
                                }
                            }
                        }
                        grid(data);
                    }
                }else {
                    alert('请选择要删除的数据！')
                }
            };
        };
    </script>
</head>
<body>
<div class="introduce">
    <div class = 'title'>管理</div>
    <div class = 'qry'>
        名称 : <input type = 'text' id="txt_name" />
        <button id="Que">查询</button>
    </div>
    <div class = 'data'>
        <div class = 'bar'>
            <button style="margin:0 30px 0 0" id="Add">新增</button>
            <button id="Del">删除</button>
        </div>
        <table  border = 1 id="theGrid">
            <thead>
            <tr>
                <th style = 'width:10%'><input id = "chkAll" name="chkAll" type="checkbox"></th>
                <th style = 'width:35%'>名称</th>
                <th style = 'width:10%'>性别</th>
                <th style = 'width:25%'>备注</th>
                <th style = 'width:10%'>操作</th>
            </tr>
            </thead>
            <tbody id = 'cateGrid'></tbody>
        </table>
        <div class = 'page'>
            <button id = 'btnHome'>首页</button>
            <button id = 'btnPrev'>上页</button>
            &nbsp;第<span id = 'spaNum'></span>页 / 一共有<span id = 'spaAll'></span>页&nbsp;
            <button id = 'btnNext'>下页</button>
            <button id = 'btnLast'>末页</button>
            每页<select id = 'selPageNum'><option value = 5>5</option><option value = 10>10</option><option value = 20>20</option></select>笔
        </div>
    </div>
    <div id="addcd" style="width: 300px;height: 190px;background-color: #faf4ff;position:fixed;top:35%;left: 35%;display: none">
        <div style="font-size: 18px">添加</div>
        <div style="font-size: 16px">
            <div style="margin: 10px 20px">序号：<input readonly type="text" id="t1"></div>
            <div style="margin: 10px 20px">名称：<input type="text" id="t2"></div>
            <div style="margin: 10px 20px">性别：
                <select id="t3">
                <option value="1">男</option>
                <option value="0">女</option>
                </select>
            </div>
            <div style="margin: 10px 20px">备注：<input type="text" id="t4"></div>
            <div>
                <button id="save" style="margin: 0  20px 0 90px">保存</button>
                <button id="cancel">取消</button>
            </div>
        </div>
    </div>
    <div id="revise" style="width: 300px;height: 190px;background-color: #faf4ff;position:fixed;top:35%;left: 35%;display: none">
        <div style="font-size: 18px">修改信息</div>
        <div style="font-size: 16px">
            <div style="margin: 10px 20px">序号：<input readonly type="text" id="t1a"></div>
            <div style="margin: 10px 20px">商品名称：<input type="text" id="t2a"></div>
            <div style="margin: 10px 20px">性别：<select id="t3a">
                <option value="1">男</option>
                <option value="0">女</option>
            </select></div>
            <div style="margin: 10px 20px">备注：<input type="text" id="t4a"></div>
            <div>
                <button id="savea" style="margin: 0  20px 0 90px">修改</button>
                <button id="cancela">取消</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>